<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Badges &amp; Labels</h3>
</div>
<div class="p-md">
  <div class="row">
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Badge Colors</h5>
      <p>
        <span class="badge">14</span> 
        <span class="badge bg-primary">250</span> 
        <span class="badge bg-info">6</span> 
        <span class="badge bg-success">9</span> 
        <span class="badge bg-warning">20</span>
        <span class="badge bg-danger">5</span>
        <span class="badge bg-dark">2</span>
        <span class="badge bg-black">8</span>
        <span class="badge bg-light">8</span>
        <span class="badge badge-black">6</span>
      </p>
      <h5 class="no-margin m-b m-t-lg">Size</h5>
      <p>
        <span class="badge badge-lg">8</span> 
        <span class="badge bg-primary">50</span>
        <span class="badge badge-sm bg-success">6</span>
        <span class="badge badge-xs bg-danger">3</span>
      </p>
      <h5 class="no-margin m-b m-t-lg">With arrow</h5>
      <p>
        <span class="badge badge-lg bg-primary pos-rlt m-r-xs"><b class="arrow top b-primary pull-in"></b>5</span>
        <span class="badge bg-success pos-rlt m-r-xs"><b class="arrow right b-success pull-in"></b>9</span>
        <span class="badge bg-info pos-rlt m-r-xs"><b class="arrow bottom b-info pull-in"></b>10</span>
        <span class="badge bg-dark pos-rlt m-r-xs"><b class="arrow left b-dark pull-in"></b>2</span>
      </p>
      <h5 class="no-margin m-b m-t-lg">Usage</h5>
      <div class="m-b-lg">
        <button class="btn m-v-xs btn-default">Notifications <b class="badge bg-info m-l-xs">23</b></button>
        <button class="btn m-v-xs btn-primary">UI Kits <b class="badge m-l-xs">6</b></button>
        <button class="btn m-v-xs btn-info">Components <b class="badge m-l-xs">8</b></button>
        <button class="btn m-v-xs btn-success">Pages <b class="badge m-l-xs">4</b></button>
        <button class="btn m-v-xs btn-sm btn-dark">Dark <b class="badge badge-sm bg-warning m-l-xs">7</b></button>
        <button class="btn m-v-xs btn-xs btn-default">Default <b class="badge badge-xs m-l-xs">23</b></button>
      </div>
      <div class="m-b">
        <i class="fa fa-bell text-lg"></i><b class="badge bg-danger up">3</b>
        <i class="fa fa-bell-o m-l-sm"></i><b class="badge badge-xs bg-success up">5</b>
      </div>
      <ul class="nav nav-lines m-b b-b" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>
            <span>Components</span>
            <span class="badge bg-warning">2</span>
          </a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
      <ul class="nav nav-sm nav-pills m-b" ui-nav>
        <li class="active">
          <a href>Pages</a>
        </li>
        <li>
          <a href>Components <span class="badge bg-success badge-sm">2</span></a>
        </li>
        <li>
          <a href>UI Kits</a>
        </li>
      </ul>
    </div>
    <div class="col-sm-6">
      <h5 class="no-margin m-b">Label Colors</h5>
      <p>
        <span class="label">A</span> 
        <span class="label bg-primary">B</span> 
        <span class="label bg-info">C</span> 
        <span class="label bg-success">D</span> 
        <span class="label bg-warning">E</span>
        <span class="label bg-danger">F</span>
        <span class="label bg-dark">G</span>
        <span class="label bg-black">H</span>
        <span class="label bg-light">J</span>
        <span class="label label-black">J</span>
      </p>
      <h5 class="no-margin m-b m-t-lg">Size</h5>
      <p>
        <span class="label label-lg">A</span> 
        <span class="label bg-primary">B</span>
        <span class="label label-sm bg-success">C</span>
        <span class="label label-xs bg-danger">D</span>
      </p>
      <h5 class="no-margin m-b m-t-lg">With arrow</h5>
      <p>
        <span class="label label-lg bg-primary pos-rlt m-r-xs"><b class="arrow top b-primary"></b>NEW</span>
        <span class="label bg-success pos-rlt m-r-xs"><b class="arrow right b-success pull-in"></b>SUCCESS</span>
        <span class="label bg-info pos-rlt m-r-xs"><b class="arrow bottom b-info pull-in"></b>INFO</span>
        <span class="label bg-dark pos-rlt m-r-xs"><b class="arrow left b-dark pull-in"></b>DARK</span>
      </p>
      <h5 class="no-margin m-b m-t-lg">Usage</h5>
      <div class="m-b-lg">
        <span class="label bg-success pos-rlt m-r-xs"><b class="arrow right b-success pull-in"></b>Tags</span>
        <a href class="m-h-xs">Angular</a>
        <a href class="m-h-xs">Bootstrap</a>
        <a href class="m-h-xs">Web</a>
        <a href class="m-h-xs">App</a>
      </div>
    </div>
  </div>
</div>